{% extends '_layout.html' %}

{% block _head %}
    {% load static %}
    <script src="{% static 'js/echarts.min.js' %}"></script>
{% endblock %}

{% block main %}
    <div id="main" style="width: 80%;height:80%;"></div>
{% endblock %}

{% block script %}
    <script>
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));

        // 指定图表的配置项和数据
        var option = {
            title: {
                text: 'ECharts 入门示例'
            },
            tooltip: {},
            legend: {
                data: ['销量']
            },
            xAxis: {
                data: ["LP001002", "LP001018", "LP001020", "LP001024", "LP001028", "LP001029"]
            },
            yAxis: {},
            series: [{
                name: 'LoanAmount_log',
                type: 'bar',
                data: [4.852030263919617, 5.123963979403259, 5.855071922202427, 4.248495242049359, 4.6913478822291435, 5.298317366548036]
            }]
        };

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
        let myChartSan = echarts.init(document.getElementById('san'));
        let data = {{ data| safe }}
        console.log(data)
        const datas = []
        data.forEach(item => {
            console.log(item)
            datas.push([item[8], item[10]])
        })
        // 使用刚指定的配置项和数据显示图表

        let option1 = {
            title: {
                text: '年龄与工资散点图'
            },
            xAxis: {},
            yAxis: {},
            series: [{
                symbolSize: 12,
                data: datas,

                type: 'scatter'
            }],
            color: ['green']
        }
        myChartSan.setOption(option1);
    </script>
{% endblock %}